<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="browsermode" content="application" />
    <meta name="x5-page-mode" content="app" />
    <title>下载APP</title>
    <link href="css/main.css?rev=@@hash" rel="stylesheet" />
    <style>
    	html {
		    font-size: 100px;
		    margin: 0;
		    padding: 0;
		}
        *{
		    margin: 0;
		    padding: 0;
        }
        body{
        	width: 100%;
		    background: url(images/bg.png) no-repeat center;
		    background-size: 100% 100%;
        }
        a{
           text-decoration: none;
           color: #1B1B1B;
        }
        .headBody{
        	width: 100%;
        	height: .44rem;
        	line-height: .44rem;
        	font-size: .17rem;
        	color: #1B1B1B;
        	background: #fefefe;
        }
        .backIco{
		    width: 10%;
		    height: .44rem;
		    text-align: center;
		    display: inline-block;
		    float: left;
        }
        .titleTxt{
		    display: inline-block;
		    width: 80%;
		    line-height: .44rem;
		    text-align: center;
		    float: left;
        }
         #btnImgCode{
            width: .67rem;
            height: .29rem;
            margin-right: .1rem;
        } 
        .login_item2{
            position: relative;
        }        
		.login_item2::before {
			content: " ";
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 3.11rem;
		    height: 1px;
		    border-top: 1px solid #dcdada;
		    -webkit-transform-origin: 0 0;
		    transform-origin: 0 0;
		    -webkit-transform: scaleY(.5);
		    transform: scaleY(.5);
		}              
        .sectionBody{
        	width: 100%;
        	height: 6.7rem;
        	background: url(images/bg.png) no-repeat center;
        	background-size: 100%;
        }
        h1{
        	color: #fff;
		    text-align: center;
        	padding: .5rem 0 .1rem 0;
        }
        .registLog{
			width: 3.12rem;
		    height: 2.55rem;
		    margin: 0 auto;
		    display: none;
		    /*position: fixed;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%,-108%);*/
        }
        .cardInfo{
		    width: 3.25rem;
		    height: 2.7rem;
		    margin: -.2rem auto 0;
		    background: url(images/cardInfo.png) no-repeat center;
		    background-size: 100% 100%;
		    position: relative;
        }
        .cardInfo p:nth-child(1){
    	    font-size: .15rem;
		    color: #4C4C4C;
		    width: 100%;
		    text-align: center;
	        padding-top: .64rem;
        }
        .cardInfo p:nth-child(1)::after{
		    content: " ";
		    position: absolute;
		    left: .6rem;
		    top: 48%;
		    width: 60%;
		    height: 1px;
		    border-top: 6px solid rgba(255, 185, 38, 0.3);
		    color: #E4E4E4;
		    -webkit-transform-origin: 0 0;
		    transform-origin: 0 0;
		    -webkit-transform: scaleY(.5);
		    transform: scaleY(.5);    	
        }
        .cardInfo p:nth-child(2){
    	    font-size: .18rem;
		    color: #061830;
		    width: 100%;
		    text-align: center;
	        padding-top: .3rem;
        }    
        .cardInfo p:nth-child(3){
        	text-align: center;
        	padding-top: .1rem;
        }
        .cardInfo p:nth-child(2)::after{
		    content: " ";
		    position: absolute;
		    left: 0.7rem;
		    top: 53%;
		    width: 60%;
		    height: 1px;
		    border-top: 6px solid rgba(255, 185, 38, 0.3);
		    color: #E4E4E4;
		    -webkit-transform-origin: 0 0;
		    transform-origin: 0 0;
		    -webkit-transform: scaleY(.5);
		    transform: scaleY(.5);
        }  
        .cardInfo p:nth-child(3)::after{
		    content: " ";
		    position: absolute;
		    left: 0.3rem;
		    top: 64%;
		    width: 80%;
		    height: 1px;
		    border-top: 6px solid rgba(255, 185, 38, 0.3);
		    color: #E4E4E4;
		    -webkit-transform-origin: 0 0;
		    transform-origin: 0 0;
		    -webkit-transform: scaleY(.5);
		    transform: scaleY(.5);	
        }                          
        .btnWrap{
        	width: 3.05rem;
        	margin: 0 auto;
        	display: flex;
        	justify-content:  space-between ;
        }
        .btnWrap a{
        	width: 1.43rem;
        	height: .45rem;
        	line-height: .45rem;
        	text-align: center;
        	font-size: .15rem;
        	color: #3276FE;
        	background: linear-gradient(top,#C4D3FF,#FFFFFF);
		    background: -webkit-linear-gradient(top,#C4D3FF,#FFFFFF);
		    border-radius: .25rem;
		    margin-top: .34rem;
        }
        .login_item{
            height: .5rem;
            line-height: .5rem;
            align-items: center;
            background: #fff;
        }
        .login_item input{
            width: 100%;
            font-size: .14rem;
        }
        .login_item_bR1{
            border-radius: .1rem .1rem 0 0;
        }
        .login_item_bR2{
            border-radius: 0 0 .1rem .1rem;
        }
        .loginicon{
            width: .21rem;
            height: auto;
            margin: .18rem .1rem 0 .1rem;
        }
        .login_btn_code{
            display: block;
            width: .8rem;
            height: .3rem;
            line-height: .3rem;
            font-size: .12rem;
            color: #5c86ff;
            text-align: center;
            border: .01rem solid #5c86ff;
            border-radius: .25rem;
        }   
        .loginicon{
            width: .21rem;
            height: auto;
            margin: .18rem .1rem 0 .1rem;
        }     
        .login_box{
        	    padding-top: .2rem;
        }   
        #loginBtn {
		    position: static;
		    width: 3.1rem;
		    height: .45rem;
		    font-size: .15rem;
		    margin: .2rem auto 0;
		    text-align: center;
		    line-height: .45rem;
		    color: #3276fe;
		    background: #d6e1ff;
		    border-radius: .25rem;
		    box-shadow: 0 0 0 #fff;
        }    
        .log img{
		    display: block;
		    width: .9rem;
		    margin: 0 auto;
        }
        .showImg{
		    display: none;
		    padding: .1rem .5rem;
		    width: 60%;
		    margin: 0 auto;
		    transform: translate(0,-123%);  	
        }   
        .showImg img{
        	width: 100%;
        }
        .showAnim{
        	padding-top: 1rem;
        }   
        .fadeUp{
        	animation:fadeUp 1s ease-in-out forwards ;
        }   
        @keyframes fadeUp{
        	from{transform: translate(0,100px) scale(1);opacity: 0;}
        	to{transform: translate(0,-340px) scale(1);opacity: 1;}
        }      
        .fadeUpSlid{
        	animation:fadeUpSlid 1s ease-in-out forwards ;
        }   
        @keyframes fadeUpSlid{
        	from{transform: translate(0,0) scale(1);opacity: 1;}
        	to{transform: translate(0,-700px) scale(0);opacity: 0;}
        }                       
    </style>
</head>
<body>
	<header class="headBody">
		<a href="#" class="backIco"></a>
		<span class="titleTxt">下载APP</span>
	</header>
     <section class="sectionBody">
     	<div class="showAnim">
	     	 <div class="cardInfo">
	 	     	<div class="log">
		     		<img src="img/login_logo.png"/>
		     	</div>
	     	    <p>欢迎使用悟空招财</p>
	     	    <p>马上安装悟空招财app领钱吧</p>
	     	 </div>
	     	 <div class="btnWrap">
	     	 	<a class="uplaodBtn" >苹果下载</a>
	     	 	<a class="uplaodBtn" >安卓下载</a>
	     	 </div>
     	 </div>
     	<div class="registLog">
	        <div class="login_box">
	        	<h1>请先注册</h1> 
	            <div class="flex login_item login_item_bR1">
	                <div><img class="loginicon" src="img/login_user.png"></div>
	                <div class="cell_cn">
	                    <input type="tel" name="" id="txtMobile" placeholder="请输入您的手机号" maxlength="11">
	                </div>
	            </div>
	            <div class="flex login_item login_item2">
	                <div><img class="loginicon" src="img/login_imgcode.png"></div>
	                <input type="text" placeholder="请输入图形验证码" maxlength="6" id="txtImgCode" />
	                <input type="hidden" id="hdImgCodeID" value="" />
	                <div class="cell_ft">
	                    <img src="" id="btnImgCode"/>
	                </div>
	            </div>
	            <div class="flex login_item login_item2 login_item_bR2">
	                <div><img class="loginicon" src="img/login_code.png"></div>
	                <div class="cell_cn">
	                    <input type="tel" placeholder="短信验证码" id="txtCode" maxlength="6" />
	                </div>
	                <div class="cell_ft">
	                    <a href="javascript:;" class="login_btn_code" id="btnCode">获取验证码</a>
	                </div>
	            </div>
	        </div>
	        <div id="loginBtn" >注册</div>
     	 </div>
     	 <div class="showImg">
     	    <img  src="img/registe.png"/>
     	 </div>
     </section>
</body>
<script src="./lib/zepto.min.js?rev=@@hash"></script>
<script src="./js/main.js?rev=@@hash"></script>
<script>
! function(global, userUtil, layer, dataUtil) {	
			$("body").height(document.documentElement.clientHeight)
	        function changeImgCode() {
	          if ($("#btnImgCode").hasClass("dis")) {
	              return;
	          }
	          $("#btnImgCode").addClass("dis");
	          userUtil.ajax({
	              url: global.localUrl + "wallet/user/randomImage",
	            //   data: {
	            //       //ss: new Date().getMilliseconds()
	            //   },
	              done:function(re){
	                  $("#btnImgCode").removeClass("dis");
	                  if (1 == re.code) {
	                      $("#hdImgCodeID").val(re.data.imgSessionId);
	                      $("#btnImgCode").attr("src", "data:image/jpeg;base64," + re.data.imgBase64);
	                  }
	              }
	          });
	       }
	       $("#btnImgCode").on("click", function () {
	          changeImgCode();
	       });
        function showWaitTips() {
            var $btnCode = $("#btnCode");
            var s = 60;
            $btnCode.text("已发送(" + s + ")").addClass("dis");
            var sv = setInterval(function () {
                if (s > 1) {
                    s--;
                    $btnCode.text("已发送(" + s + ")");
                } else {
                    $btnCode.text("重新获取").removeClass("dis");
                    clearInterval(sv);
                }
            }, 1000);
        }	
	        //  短信验证码
	        $("#btnCode").on("click", function () {
	            var $this = $(this);
	            if (!$this.hasClass("dis") && validateMobile() && validateImgCode()) {
	                $this.addClass("dis");
	                var _model = getModel();
	                var _data = {
	                    mobileNumber: _model.mobileNumber,
	                    inCode: _model.inCode,
	                    imgSessionId: _model.imgSessionId,
	                    smsType:"LOGIN",
	                    //ss: new Date().getMilliseconds()
	                };
	
	                $.ajax({
	                    url: global.localUrl + "wallet/system/smsCode",
	                    type: "post",
	                    data: JSON.stringify(_data),
	                    contentType: 'application/json;charset=utf-8',
	                    success: function (re) {
	                        if (1 == re.code) {
	                            showWaitTips();
	                        }else if( 1033== re.code){
	                            changeImgCode();
	                            $("#txtImgCode").val("");
	                            $this.removeClass("dis");
	                            layer.tips("系统繁忙，请稍后再试");
	                      } else{
	                            changeImgCode();
	                            $("#txtImgCode").val("");
	                            $this.removeClass("dis");
	                            layer.tips(re.message);
	                        }
	                    },
	                    error: function () {
	                        $this.removeClass("dis");
	                        layer.tips(global.netError);
	                    }
	                });
	            }
	        });        
	        changeImgCode();	        
	        $('#loginBtn').on('click',function(){
		          var $this = $(this);
		          if (!$this.hasClass("dis") && validateMobile() && validateImgCode() && validateCode()) {
		              $this.addClass("dis");
		              var _model = getModel();
		              var _data =  {
		                  mobileNumber: _model.mobileNumber,
		                  smsCode: _model.smsCode,
		                  channel: 51
		              };
		              $('.layer_mask').addClass('on');
		              $.ajax({
		                  url: global.localUrl + "wallet/user/qdlogup",
		                  type: "post",
		                  data: JSON.stringify(_data),
		                  contentType: 'application/json;charset=utf-8',
		                  success: function (re) {
		                      $('.layer_mask').removeClass('on');
		                      if (1 == re.code) {
		                      	localStorage.setItem("flagres",re.code);
		                          layer.tips('注册成功');
		                          $('.registLog').addClass('fadeUpSlid');
		                          $('.showAnim').css('opacity','1');
		                          $('.showImg').css('display','block');
		                      } else {
		                          changeImgCode();
		                          $("#txtImgCode").val("");
		                          $("#txtCode").val("");
		                          $this.removeClass("dis");
		                          layer.tips(re.message);
		                      }
		                  },
		                  error: function () {
		                    $('.layer_mask').removeClass('on');
		                      $this.removeClass("dis");
		                      layer.tips(global.netError);
		                  }
		              });
		          }	        	
	        })
    var u = navigator.userAgent;
    var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    var android = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端	        
	$('.uplaodBtn').on('click',function(){
		var index = $('.uplaodBtn').index();
		if(localStorage.getItem("flagres") == 1){
			if(ios&& index == 0){
				$('.uplaodBtn').eq(0).attr("href","itms-services://?action=download-manifest&url=https://image.pushunjinfuchina.com/ioszhaocai/manifest.plist");
	       }else{
	        	$('.uplaodBtn').eq(1).attr("href","https://image.pushunjinfuchina.com/android/Wkzhaocai.apk");
	        }
    	}else{
    		$('.registLog').css('display','block').addClass('fadeUp');
    		$('.showAnim').css('opacity','0');
    	}
	})
     function getModel() {
          return {
              mobileNumber: $.trim($("#txtMobile").val()),
              inCode: $.trim($("#txtImgCode").val()),
              imgSessionId: $.trim($("#hdImgCodeID").val()),
              smsCode: $.trim($("#txtCode").val()),
              code: $.trim($("#txtCode").val()),
          }
      }
      function validateMobile() {
        var _model = getModel();
        if (!dataUtil.isMobile(_model.mobileNumber)) {
            layer.tips("请输入正确的手机号");
            return false;
        } 
        return true;
      }
      function validateCode() {
          var _model = getModel();
          if (!_model.code) {
              layer.tips("请输入短信验证码");
              return false;
          }
          return true;
      }
      function validateImgCode() {
          var _model = getModel();
          if (!_model.imgSessionId) {
              layer.tips("请刷新图形验证码");
              return false;
          } else if (!_model.inCode) {
              layer.tips("请输入图形验证码");
              return false;
          }
          return true;
      }	        
}(global, userUtil, layer ,dataUtil);	
</script>
</html>